$(function () {
  var protocol = false;
  var proStr = ""
  function showMsg (msg, d) {
    d = d || 1
    $('.msg-wrap').show()
    $('.msg-info').html(msg)
    setTimeout(function () {
      $('.msg-wrap').hide()
    }, 1000 * d)
  }
  // console.log(cityObj);

  for(var k in cityObj){
    proStr += '<option value="' + k + '">' + k + '</option>'
  }
  $('#province').html($('#province').html() + proStr)

  $('#province').change(function () {
    $('#city').val('')
    $('#dealer').val('')
    var citys =  cityObj[$(this).val()]
    var cityStr = '<option value="" disabled selected style="display: none;"> 选择市/区</option>'
    for(var k in citys){
      cityStr += '<option value="' + k + '">' + k + '</option>'
    }
    $('#city').html(cityStr)
  })
  $('#city').change(function(){
    $('#dealer').val('')
    var dealerStr = '<option value="" disabled selected style="display: none;">请选择经销商</option>'
    var dealers=cityObj[$('#province').val()][$(this).val()]
    dealers.forEach(v => {
      dealerStr+='<option value="' + v.dealerId + '">' + v.dealer + '</option>'
    });
    $('#dealer').html(dealerStr)

  })
  $('.consent-wrap').click(function () {
    if (protocol) {
      $('.sel-icon-un').show()
      $('.sel-icon-sel').hide()
      protocol = false
    } else {
      $('.sel-icon-un').hide()
      $('.sel-icon-sel').show()
      protocol = true
    }


  })
  $('.consent-protocol').click(function () {
    $('.shade').show()
  })
  $('.information-button').click(function () {
    $('.shade').hide()
  })
  // 马上预约
  var sending = false
  $('#subscribe').click(function () {
    if(sending){
      return
    }
    
    var name = $('#name').val()
    var mobile = $('#mobile').val()
    var car = $('#car').val()
    var province = $('#province').val()
    var city = $('#city').val()
    var dealer = $('#dealer').val()

    if (!name) {
      showMsg('请输入姓名')
      return
    }
    if (!mobile) {
      showMsg('请输入手机号')
      return
    }
    if (!/\d{11}/.test(mobile)) {
      showMsg('请输入正确的手机号')
      return
    }
    if (!car) {
      showMsg('请选择意向车型')
      return
    }
    if (!province) {
      showMsg('请选择意省')
      return
    }
    if (!city) {
      showMsg('请选择意市/区')
      return
    }
    if (!dealer) {
      showMsg('请选择经销商')
      return
    }
    if (!protocol) {
      showMsg('请同意个人信息保护声明')
      return
    }
    sending = true

    $.ajax({
      url:'https://weixinapi.yinshuiyu.com/keep.php',
      type:'post',
      data:{
        brand:'mazda',
        name:name,
        mobile:mobile,
        product:car,
        dealer:dealer,
      },
      success:function(res){
          res = JSON.parse(res)
          if(res.code==200){
            showMsg('预约成功',3)
          }else{
            showMsg(res.msg,1)
          }
          sending = false
      }
    })


  })
  var car1Swiper = new Swiper(".car1-swiper-container", {
    pagination: {
      el: ".car1-swiper-pagination",
    },
  });

  var car2Swiper = new Swiper(".car2-swiper-container", {
    pagination: {
      el: ".car2-swiper-pagination",
    },
    navigation: {
      nextEl: ".car2-swiper-button-next",
      prevEl: ".car2-swiper-button-prev",
    },
  });

  var car3Swiper = new Swiper(".car3-swiper-container", {
    pagination: {
      el: ".car3-swiper-pagination",
    },
    navigation: {
      nextEl: ".car3-swiper-button-next",
      prevEl: ".car3-swiper-button-prev",
    },
  });
  function progress (progress) {
    for (i = 0; i < this.slides.length; i++) {
      var slide = this.slides.eq(i);
      var slideProgress = this.slides[i].progress;
      modify = 1;
      if (Math.abs(slideProgress) > 1) {
        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
      }
      translate = slideProgress * modify * -12 + "px";
      scale = 1 - Math.abs(slideProgress) / 5;
      zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
      slide.transform(
        "translateX(" + translate + ") scale(" + scale + ")"
      );
      slide.css("zIndex", zIndex);
      slide.css("opacity", 1);
      if (Math.abs(slideProgress) > 3) {
        slide.css("opacity", 0);
      }
    }
  }
  function transition (transition) {
    for (var i = 0; i < this.slides.length; i++) {
      var slide = this.slides.eq(i);
      slide.transition(transition);
    }
  }


  var man1Swiper = new Swiper(".man1-swiper-container", {
    watchSlidesProgress: true,
    slidesPerView: "auto",
    centeredSlides: true,
    pagination: {
      el: ".man1-swiper-pagination",
    },
    on: {
      progress: progress,
      setTransition: transition,
    },
  });
  var man2Swiper = new Swiper(".man2-swiper-container", {
    watchSlidesProgress: true,
    slidesPerView: "auto",
    centeredSlides: true,
    pagination: {
      el: ".man2-swiper-pagination",
    },
    on: {
      progress: progress,
      setTransition: transition,
    },
  });

  var man3Swiper = new Swiper(".man3-swiper-container", {
    watchSlidesProgress: true,
    slidesPerView: "auto",
    centeredSlides: true,
    pagination: {
      el: ".man3-swiper-pagination",
    },
    on: {
      progress: progress,
      setTransition: transition,
    },
  });
  var man4Swiper = new Swiper(".man4-swiper-container", {
    watchSlidesProgress: true,
    slidesPerView: "auto",
    centeredSlides: true,
    pagination: {
      el: ".man4-swiper-pagination",
    },
    on: {
      progress: progress,
      setTransition: transition,
    },
  });

})
